<template>
  <div class="header">
    <div class="title-section">
      <h2 class="page-title">{{ title }}</h2>
      <el-button type="primary" size="small" @click="handleAdd">
        <el-icon><Plus /></el-icon>{{ addButtonText }}
      </el-button>
    </div>
    <div class="search">
      <el-input 
        v-model="searchValue" 
        :placeholder="placeholder" 
        clearable 
        size="small" 
        style="width: 250px;"
        @keyup.enter="handleSearch"
      >
        <template #prefix>
          <el-icon><Search /></el-icon>
        </template>
      </el-input>
      <el-button type="primary" size="small" @click="handleSearch">搜索</el-button>
    </div>
  </div>
</template>

<script>
import { Plus, Search } from '@element-plus/icons-vue';

export default {
  name: 'SearchBar',
  components: {
    Plus,
    Search
  },
  props: {
    title: {
      type: String,
      required: true
    },
    addButtonText: {
      type: String,
      default: '添加'
    },
    placeholder: {
      type: String,
      default: '请输入关键词搜索...'
    },
    modelValue: {
      type: String,
      default: ''
    }
  },
  computed: {
    searchValue: {
      get() {
        return this.modelValue;
      },
      set(value) {
        this.$emit('update:modelValue', value);
      }
    }
  },
  methods: {
    handleAdd() {
      this.$emit('add');
    },
    handleSearch() {
      this.$emit('search');
    }
  }
};
</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.title-section {
  display: flex;
  align-items: center;
  gap: 16px;
}

.page-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #303133;
}

.search {
  display: flex;
  align-items: center;
  gap: 12px;
}
</style>